import React from 'react';

interface Step {
  id: number;
  label: string;
  active: boolean;
}

interface ProgressIndicatorProps {
  steps: Step[];
}

const ProgressIndicator: React.FC<ProgressIndicatorProps> = ({ steps }) => {
  return (
    <div className="relative z-10 flex items-center justify-center space-x-4">
      {steps.map((step, index) => (
        <React.Fragment key={step.id}>
          <div className="flex items-center">
            <div
              className={`text-sm font-medium ${step.active ? 'text-gray-900' : 'text-gray-400'}`}
            >
              ·{step.label}
            </div>
          </div>
          {index < steps.length - 1 && (
            <div className="h-px w-8 border-t border-dashed border-gray-300" />
          )}
        </React.Fragment>
      ))}
    </div>
  );
};

export default ProgressIndicator;
